<template>
  <div class="page">
<div class="container">
		<header>
			<h1>房产资讯</h1>
		</header>
		<div class="ad">
			<swiper :options="swiperOption" v-if="newList.length">
					<li class="swiper-slide" v-for="(val,key) in newList" :key="key">
						<p>最新资讯<span>{{val.pubtime}}</span></p>
						<h1>{{val.title}}</h1>
						<p>{{val.desc}}</p>
						<img :src="val.imgPath1">
					</li>
					
			</swiper>	
		</div>
		<!-- <script>
			var ul = document.querySelector(".ad ul");
			var num = 0;
			var liclone=ul.children[0].cloneNode(true);
			var c=ul.appendChild(liclone);
			var liclone2=ul.children[1].cloneNode(true);
			var c2=ul.appendChild(liclone2);
			ul.style.width=ul.children.length*6.9+"rem";
			setInterval(function () {
				num++;
				if (num > ul.children.length-2) {
					num = 0;
					ul.style.left = 0 + "px";
				}
				var timer = setInterval(function () {
					if (ul.offsetLeft <= -num * (ul.offsetWidth / ul.children.length)) {
						clearInterval(timer);
					}
					ul.style.left = ul.offsetLeft - 2 + "px";
				}, 5);
			}, 2000);
		</script> -->
		<section class="content">
			<h1>热门资讯
				<span>
					<router-link to="/infomore">
						<a href="javascript:;">更多&gt;</a> 
					</router-link>
				</span>
				</h1>

			<ul class="case">
				<li v-for="(val) in hotList" :key="val.nid">
					<a href="#">
						<img :src="val.imgPath2" class="img-left fl">
						<div class="text fr">
							<p>{{val.desc}}</p>
							<div>{{val.source}}</div>
							<span><img src="images/icon1.jpg">2406</span>
							<span><img src="images/icon2.jpg">520</span>
						</div>
					</a>
				</li>
				<!-- <li>
					<a href="#">
						<img src="images/6.jpg" class="img-left fl">
						<div class="text fr">
							<p>健康住宅“这个圈”如何才能画满360度？</p>
							<div>包图新闻</div>
							<span><img src="images/icon1.jpg">2406</span>
							<span><img src="images/icon2.jpg">520</span>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/6.jpg" class="img-left fl">
						<div class="text fr">
							<p>健康住宅“这个圈”如何才能画满360度？</p>
							<div>包图新闻</div>
							<span><img src="images/icon1.jpg">2406</span>
							<span><img src="images/icon2.jpg">520</span>
						</div>
					</a>
				</li> -->
			</ul>
			<p
          style="text-align:center; margin-bottom:1.5rem; font-size:0.3rem"
          @click="getMore"
        >{{loadMore}}</p>
		</section>
		
	</div>
  </div>
</template>

<script type="text/ecmascript-6">
 // 默认输出组件对象（只输出一次）
  export default {
      name:'home',
    data () {
      return {  //定义变量
		swiperOption: {
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true, //是否自动轮播
      },
       newList:[],
	hList:[],
	loadMore: "加载更多....",
	pn:1,
		}
    },
    //加载子组件（页面分离的内容）
    components: {

    },
    //生命周期
    mounted () {
		let _this = this;
    this.$axios({
      //使用全局的this.$axios
      methods: "get",
      url: "/data/news_data.json",
    })
      .then(function (res) {
        //请求成功
        console.log(res);
        let data = res.data;
        //给data的变量赋值
        if (data.code == 200) {
         _this.newList = data.newList;
         _this.hList = data.hotList;
        }
      })
      .catch((error) => {
        //错误（网络中断、请求地址有问题）
        console.log(error);
      });
      
      //调用sotre的info.js
        this.$store.dispatch('gethotList',this.pn);
    },
    created () {
        
    },
    updated () {
        
    },
    destroyed () {
        
    },
    methods: {
		//事件函数（用方法格式）
		getMore(){
			let arr = this.$store.state.info.hotList;
			let total = this.$store.state.info.total;
			if(arr.length >= total){
				return;
			}
		
        this.$store.dispatch('gethotList',++this.pn);
		}
    },
    computed: { 
		//计算属性（定义变量，跟data不一样，可以对变量的值进行更多的赋值操作）
		hotList(){
			//定义hotList变量
			return this.$store.state.info.hotList;
		}
    },
    watch: {
		//监听变量的改变（会可以自动更新变量的值）
		hotList(){
			let arr = this.$store.state.info.hotList;
			let total = this.$store.state.info.total;
			if(arr.length >= total){
				this.loadMore= "到底了"
			}
		}
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
// @import url("../assets/css/info.css");
 header {
	height: .7rem;
	margin: .35rem .25rem 0;
	font-size: .28rem;
}

header p {
	font-size: .48rem;
}

.ad {
	/* height: 6.3rem; */
	margin-left: .39rem;
	margin-top: .47rem;
	overflow: hidden;
	position: relative;
}

.ad p:nth-child(1) {
	font-size: .30rem;
	color: #fbac7c;
}

.ad p:nth-child(1) span {
	color: #7a7a7a;
	font-size: .25rem;
	float: right;
}

.ad p:nth-child(1)::after {
	content: "";
	display: block;
	clear: both;
}

.ad h1 {
	margin-top: .19rem;
	color: #424241;
	font-size: .42rem;
}

.ad p:nth-child(3) {
	margin-top: .14rem;
	color: #424242;
	font-size: .32rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: .23rem;
}

.ad img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: .16rem;
}

.ad ul {
	/* width: 20.7rem; */
	width: 27.6rem;
	position: relative;
	top: 0;
	left: 0;
}

.ad ul li {
	width: 6.75rem;
	float: left;
	margin-right: .15rem;
}

.content {
	margin: 0 .3rem 1.2rem;
}

.content h1 {
	font-size: .48rem;
	margin: .45rem 0;
}

.content h1 span {
	float: right;
	font-size: .34rem;
	color: #b4b4b4;
}

.content h1 span a {
	color: inherit;
	text-decoration: none;
}

.content .case li img.img-left {
	width: 2.05rem;
	height: 1.52rem;
}

.content .case li .text {
	width: 4.51rem !important;
	height: 1.52rem !important;
	position: relative;
}

.content .case li .text p {
	font-size: .36rem;
	line-height: .46rem;
	color: #7c7c7c;
}

.content .case li .text div {
	display: inline-block;
	padding: .07rem;
	color: #ff3b3d;
	font-size: .26rem;
	background-color: f6f6f6;
	position: absolute;
	left: 0;
	bottom: 0;
}

.content .case li .text span {
	color: #aaaaa8;
	font-size: .26rem;
	position: absolute;
	bottom: .1rem;
}

.content .case li .text span:nth-last-child(2) {
	right: 1.2rem;
}

.content .case li .text span:nth-last-child(1) {
	right: .13rem;
}

.content .case li .text span img {
	width: .26rem;
	height: .24rem;
	margin-right: .1rem;
}
</style>
